<!DOCTYPE html>
<html>
    <head>
        <title>使用Element对象</title>
    </head>
    <body>
        <a id="ilovenmixx" href="https://nmixx.jype.com/">我爱死NMIXX了，我要为了你们学一辈子韩语！！！</a>
        <div>Don't say hello to such a bad boy</div>
        <div>You're fobidden to access to it.</div>
        <div>居然打印输出的是数组对象</div>
        <div class="showlove">我爱死NMIXX了，求求你们不要勾引我！！！</div>
        <div>
            <form name="favorito_esposa"  >输入你最喜欢的NMIXX成员</form>
        </div>
        <script>
            // 爬取国立国语院的词库然后自己存到MySQL数据库中？？？？
            // 你也太牛逼了，其实这也有点用

            var allElements = document.getElementsByTagName('div');
            console.log(allElements);
            
            // xpath("???")
            console.log(allElements[1].textContent);
            // 居然是textContent这样的用法

            // 修改？？
            allElements[0].innerHTML = "NMIXX 你们能不能不要这么美丽？？"


            // 使用类名来获取元素的属性
            // 注意返回值为列表类型，需要加方括号
            var by_class = document.getElementsByClassName('showlove');
            console.log(by_class[0].textContent);
            by_class[0].innerHTML = "事实证明这才是爱豆的正确用法";// 通过innerHTML接口
            console.log(by_class[0].textContent); 


            // 通过name属性来找到元素
            var by_name = document.getElementsByName('favorito_esposa');
            console.log(by_name[0].innerHTML+by_class[0].textContent);
            

            // 使用id号来获取元素，由于id不重复，所以直接返回对象而非列表
            console.log(document.getElementById('ilovenmixx'));
            var by_id = document.getElementById('ilovenmixx');
            by_id.innerHTML = "这个a标签我不知道用了多少次jype.com....";
            

            //使用CSS选择器进行定位
            var search_result = document.querySelector('.showlove');
            console.log(search_result.innerHTML);


            // 找到全部符合要求的节点
            var find_all_result = document.querySelectorAll('div');
            find_all_result.forEach(element => {
                console.log(element.textContent);
            });
            // 也是用上高级foreach循环了
        </script>
    </body>
</html>
